<template>
  <el-card shadow="never" class="card" style="overflow: auto">
    <el-row :gutter="5">
      <el-col :span="24" style="text-align: center" v-if="fieldname">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          style="margin-bottom: 10px; width: 100%"
          @click="addBox"
          round
        >
          新增箱子
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          style="margin: 20px 0"
          v-model="filterText"
        ></el-input>
      </el-col>
    </el-row>
    <el-tree
      :props="defaultProps"
      :data="treelist"
      :default-expand-all="expand"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span
        ><span>{{ data.content }}</span>
        <el-button
          v-if="fieldname"
          type="text"
          size="mini"
          icon="el-icon-delete"
          @click.stop="() => remove(data)"
        >
        </el-button>
      </span>
    </el-tree>
  </el-card>
</template>

<script>
export default {
  name: "LeftTree",
  props: {
    treelist: {
      type: Array,
    },
    fieldname: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      filterText: "",
      expand: true,
      categoryForm: {},
      defaultProps: {
        children: "children",
        label: "key",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      return data.key.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.$emit("update:search_data", data.key);
      this.$emit("refesh_list", data.val);
    },
    toggleRowExpansion() {
      this.expand = !this.expand;
      this.changeTreeNodeStatus(this.$refs.tree.store.root);
    },
    //-----------折叠-----------------------------------
    changeTreeNodeStatus(node) {
      node.expanded = this.expand;
      for (let i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].expanded = this.expand;
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(node.childNodes[i]);
        }
      }
    },
    //---------------货架------------------------------
    remove(data) {
      this.$confirm("确定操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("removeCategory", data.val);
        })
        .catch();
    },
    //---------------新增------------------------------
    addBox() {
      this.$emit("addBox");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
}

.card {
  min-height: 800px;
}

.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  span {
    margin: 10px 0;
    font-size: 14px;
  }
}

.el-tree-node__expand-icon.is-leaf {
  display: none;
}
</style>
